<template>
    <Panel style="margin:5px;">
        <template slot="header">
            <Form :model="searchModel" class="e-search">
                <div class="e-field-inline">
                    <Label align="left" class="e-label" style="width: auto">报告名称:</Label>
                    <TextBox inputId="name" v-model="searchModel.name"></TextBox>
                </div>
                <div class="e-field-inline" style="width: auto">
                    <LinkButton :disabled="false" @click="submitSearch()" iconCls="icon-search">查询</LinkButton>
                </div>
            </Form>
        </template>

        <Dialog ref="d1"
                :title="formTitle"
                :modal="true"
                :closed="true"
                :draggable="false"
                :resizable="true"
        >
            <vue-json-editor
                    v-model="resultInfo"
                    :mode="'code'"
                    lang="zh"
                    :show-btns="true"
                    @json-save="onJsonSave"
                    style="width: 800px; height: 450px"
            />
        </Dialog>

        <Panel :bodyStyle="{padding:'5px'}">
            <LinkButton iconCls="icon-custom-api" :plain="true" @click="openJsonWin()">模拟报表生成</LinkButton>
            <LinkButton iconCls="icon-reload" :plain="true" @click="reload">刷新</LinkButton>
        </Panel>

        <DataGrid :data="data" class="e-table" :dblclickToEdit="true" editMode="cell" @editEnd="editEnd">
            <!--            <GridColumn field="id" title="Id" :sortable="true" width="200"></GridColumn>-->
            <GridColumn field="name" title="报告名称" :sortable="true"></GridColumn>
            <GridColumn field="create_time" title="生成时间" :sortable="true"></GridColumn>
            <!--<GridColumn field="download" title="下载地址">
                <template slot="body" slot-scope="scope">

                </template>
            </GridColumn>-->
            <GridColumn field="update_time" title="最近下载时间" :sortable="true"></GridColumn>
            <GridColumn field="download_count" title="下载次数" width="80"></GridColumn>
            <!--            <GridColumn field="uid" title="用户Id"></GridColumn>-->
            <GridColumn title="操作">
                <template slot="body" slot-scope="scope">
                    <LinkButton iconCls="icon-cancel" v-if="scope.row['shared'] === 0" @click="shared(scope.row,true)">
                        取消分享
                    </LinkButton>
                    <LinkButton iconCls="icon-ok" v-if="scope.row['shared'] === 1" @click="shared(scope.row,false)">已分享
                    </LinkButton>
                    <LinkButton iconCls="icon-custom-download" @click="download(scope.row['id'])">下载</LinkButton>
                    <LinkButton iconCls="icon-remove" @click="del(scope.row)">删除</LinkButton>
                    <LinkButton iconCls="icon-custom-copy" @click="copyText(scope.row.download)">复制地址</LinkButton>
                </template>
            </GridColumn>
        </DataGrid>

        <template slot="footer">
            <Pagination :total="total" :pageSize="pagesize" :pageNumber="page" :layout="layout"
                        @pageChange="pageChange($event)"></Pagination>
        </template>
    </Panel>
</template>

<script>
    import {mixinPage} from "@/common/page.mixin"
    import ReportTemplate from "@/pages/modular/report/template/Index"
    import vueJsonEditor from 'vue-json-editor'

    export default {
        name: "report-download",
        components: {ReportTemplate, vueJsonEditor},
        mixins: [mixinPage],
        async created() {
            this.search({})
        },
        data() {
            return {
                resultInfo: {
                    "id": "模板Id",
                    "params": {
                        "paragraphs": {
                            "段落替换文本": "替换值"
                        },
                        "tables": [],
                        "service": "cosWordOutput"
                    }
                }
            }
        },
        methods: {
            search(request) {
                this.$e.api.reportDownloadList(request).then(res => {
                    [this.data, this.total] = res
                })
            },
            conditions() {
                return [
                    {key: "name", value: this.searchModel.name, type: "like"}
                ]
            },
            submitDelete(request, row) {
                this.$e.api.reportDownloadDel(request).then(res => {
                    let [, code] = res
                    if (code === 200) {
                        this.search({conditions: this.conditions()})
                    }
                })
            },
            shared(row, isShared) {
                let request = {
                    editor: [
                        {"key": "shared", "value": isShared ? 1 : 0}
                    ],
                    conditions: [
                        {"key": "id", "value": row["id"]}
                    ]
                }
                this.$e.api.reportDownloadEdit(request).then(res => {
                    let [, , message] = res
                    this.$toast.center(message)
                    this.searchModel = {}
                    this.page = 1
                    this.search({})
                })
            },
            copyText(text) {
                let that = this
                this.$copyText(text).then(function (e) {
                    that.$toast.center("复制成功！")
                }, function (e) {
                })
            },
            download(reportId) {
                this.$e.api.reportDownload({reportId: reportId}).then(res => {
                    let [, code, message] = res
                    if (code !== 200) {
                        this.$toast.center(message)
                    }
                })
            },
            openJsonWin() {
                this.formTitle = "JSON模拟报表生成"
                this.$refs.d1.open()
            },
            onJsonSave(value) {
                this.$e.api.reportOutput(value).then(res => {
                    let [, code, message] = res
                    if (code === 200) {
                        this.search({})
                        this.$refs.d1.close()
                    }
                    this.$toast.center(message)
                })
            }
        }
    }
</script>

<style>
    .jsoneditor-vue {
        height: 400px;
    }
</style>